<template>
  <div v-if="data">
    <a-modal title="修改套餐价格" :visible="visible" :width="760" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="upload-tips tab-middle-tips mb10">
        <div>修改操作需在产品套餐提交SPU审核前或驳回之后进行，修改保存后需要重新提交SPU审核，抖音平台才能重新对价格金额进行审核</div>
      </div>
      <div v-for="(item, index) in data.list" :key="index" class="mb10">
        <div class="mb10">套餐{{ index + 1 }}：{{ item.subTitle }}</div>
        <a-table :columns="columns" :data-source="item.newMediaChannelPriceList" :pagination="false">
          <template slot="originPrice" slot-scope="text, row">
            <a-input type="text" v-model="row.originPrice" />
          </template>
          <template slot="salePrice" slot-scope="text, row">
            <a-input type="text" v-model="row.salePrice" />
          </template>
          <template slot="channelMoney" slot-scope="text, row">
            <a-input type="text" v-model="row.channelMoney" />
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { saveNewMediaChannelPrice, saveNewMediaChannelPriceManager } from '@/service'
const columns = [
  {
    title: '上线渠道',
    dataIndex: 'channelName',
    key: 'channelName'
  },
  {
    title: '门市价',
    dataIndex: 'originPrice',
    key: 'originPrice',
    scopedSlots: { customRender: 'originPrice' }
  },
  {
    title: '商品售价',
    dataIndex: 'salePrice',
    key: 'salePrice',
    scopedSlots: { customRender: 'salePrice' }
  },
  {
    title: '商家结算价',
    dataIndex: 'settlePrice',
    key: 'settlePrice'
  },
  {
    title: '渠道平台佣金',
    dataIndex: 'channelMoney',
    key: 'channelMoney',
    scopedSlots: { customRender: 'channelMoney' }
  }
]
export default {
  name: 'packagePriceSetting',

  model: {
    props: 'value',
    event: 'change'
  },
  props: {
    value: { type: Boolean },
    data: { type: Object, default: () => ({}) },
    role: { type: String, default: '0' }
  },

  data() {
    return {
      confirmLoading: false,
      columns
    }
  },
  computed: {
    visible: {
      get() {
        if (!this.data) return false
        return this.value
      },
      set(v) {
        this.$emit('change', v)
      }
    }
  },
  methods: {
    async handleOk() {
      this.confirmLoading = true
      try {
        if (this.role === 1) {
          await saveNewMediaChannelPriceManager({ ...this.data })
        } else {
          await saveNewMediaChannelPrice({ ...this.data })
        }

        this.$messageSend.success('成功')
        this.confirmLoading = false
        this.handleCancel()
      } catch (error) {
        this.confirmLoading = false
      }
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scpoed>
.upload-tips {
  color: #f5894e;
  font-size: 10px;
  transform: scale(1);
  line-height: 22px;
}
.tab-middle-tips {
  width: 100%;
  border-radius: 2px;
  border: 1px solid #f5894e;
  // height: 67px;
  background: rgba(245, 137, 78, 0.1);
  padding: 8px;
  line-height: normal;
}
</style>
